/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-03-22 09:38:06
 * @LastEditors: voanit
 * @LastEditTime: 2022-03-22 14:51:22
 */
import React, { useState } from 'react'

import { useSelector, useDispatch } from 'react-redux'
import { filterActive } from '../../store/actions/index'
export default function Footer() {
  // const [sel, setSel] = useState('all')
  const dispatch = useDispatch()
  const list = useSelector((state) => state.todo)
  const sel = useSelector((state) => state.filter)
  const count = list.filter((item) => !item.isDone).length
  return (
    <footer className="footer">
      =={sel}
      <span className="todo-count">
        <strong>{count}</strong> 未完成
      </span>
      <ul className="filters">
        <li>
          <a
            onClick={() => {
              // setSel('all')
              dispatch(filterActive('all'))
            }}
            className={sel === 'all' ? 'selected' : ''}
            href="#/"
          >
            所有
          </a>
        </li>
        <li>
          <a
            className={sel === 'active' ? 'selected' : ''}
            href="#/active"
            onClick={() => {
              // setSel('active')
              // dispatch({
              //   type: 'filter/active',
              //   payload: 'active',
              // })
              dispatch(filterActive('active'))
            }}
          >
            待办
          </a>
        </li>
        <li>
          <a
            className={sel === 'completed' ? 'selected' : ''}
            href="#/completed"
            onClick={() => {
              // setSel('completed')
              // dispatch({
              //   type: 'filter/completed',
              //   payload: 'completed',
              // })
              dispatch(filterActive('completed'))
            }}
          >
            已完成
          </a>
        </li>
      </ul>
      <button
        className="clear-completed"
        onClick={() => {
          dispatch({ type: 'todo/delDone' })
        }}
      >
        清空已完成
      </button>
    </footer>
  )
}
